<template>
    <div>
    <div style='text-align:right'>
     <el-select v-model="query.num" placeholder="请选择时间" style="width: 30%;" @change='getE' clearable >
                <el-option  value="7" label="近七天"></el-option>
                <el-option  value="30" label="近一个月"></el-option>
            </el-select>
            </div>
     <div id='main' style='width:100%;height:calc(100vh - 150px)'></div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
    import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    import {
     prodyctEcharts
    } from "~/api/xm.js"
    import {
        useStore
    } from 'vuex'
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    import {
        Plus
    } from '@element-plus/icons-vue'
    const store = useStore()
    const query=ref({
        type:6
    })
 function getE(){
    prodyctEcharts(query.value).then(res=>{
     console.log(12)
    var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
   title: {
    text: '退货统计',

  },
      tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: res.data.map(v=>v.name)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: res.data.map(v=>v.count),
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);
    })
    
 }
 onMounted(()=>{

getE()
 })
</script>


<style>
 
</style>